<!--经责大屏-->
<template>
  <div class="content" id="content">
    <!--    头部标题-->
    <div class="content-header">
      <div class="header-btn">
        <div class="btn" @click="back">
          <el-icon><HomeFilled /></el-icon>
          进入工作界面
        </div>
      </div>
    </div>
    <!--    内容区域-->
    <div class="content-body">
      <div class="body-generalSituation">
        <!--    审计项目概况-->
        <div class="generalSituation-title">
          <div class="title-left">审计项目概况</div>
          <div class="title-right">可纳入任期审计对象</div>
        </div>
        <div class="generalSituation-describe">
          自2018年至今，共累计发起经责审计项目25个，其中任中审计2个，离任审计23个；已完成25个，进行中的0个。
        </div>
        <div class="generalSituation-chart">
          <div class="body-item">
            <div class="item-title">时间分布</div>
            <!--              时间分布-->
            <div id="distributionOfTime"></div>
          </div>
          <div class="body-item">
            <div class="item-title">覆盖单位</div>
            <!--              覆盖单位-->
            <div id="mapChart"></div>
          </div>
          <div class="body-item">
            <div class="item-form">
              <div class="form-th">
                <div class="th-td">所属单位名称</div>
                <div class="th-td">负责人</div>
                <div class="th-td">任职时间/月</div>
                <div class="th-td">操作</div>
              </div>
              <div class="form-tr" v-for="(item, index) in auditTargetArray" :key="index">
                <div class="tr-td">{{ item.company }}</div>
                <div class="tr-td">{{ filtrationName(item.name) }}</div>
                <div class="tr-td">{{ item.employmentPeriod }}</div>
                <div class="tr-td" @click="examine(item)">查看</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <ChartSet></ChartSet>
    </div>
    <!--    弹窗-->
    <el-dialog
      v-model="dialogVisible"
      title="可纳入任期审计对象详情"
      custom-class="content-dialog"
      center
      :show-close="false"
      modal-class="modal-class"
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="dialog-header">
          <div :id="titleId" class="header-titleClass">可纳入任期审计对象详情</div>
          <el-icon class="header-close" @click="close"><CircleClose /></el-icon>
        </div>
      </template>
      <vxe-table height="100%" :data="tableData" align="center" class="body-scrollbar">
        <vxe-column field="companyName" title="公司名称"></vxe-column>
        <vxe-column field="company" title="所属单位名称"></vxe-column>
        <vxe-column field="flatType" title="所属单位类型"></vxe-column>
        <vxe-column field="name" title="负责人"></vxe-column>
        <vxe-column field="position" title="任职职位"></vxe-column>
        <vxe-column field="type" title="类型" show-overflow></vxe-column>
        <vxe-column field="employmentPeriod" title="任职时间/月" show-overflow></vxe-column>
        <vxe-column field="commencementOfOffice" title="任职开始日期" show-overflow></vxe-column>
        <vxe-column field="endOfService" title="任职结束日期" show-overflow></vxe-column>
        <vxe-column field="manpowerMandate" title="人力委托" show-overflow></vxe-column>
        <vxe-column field="auditSituation" title="本任期接受经济责任审计情况" show-overflow></vxe-column>
        <vxe-column field="auditInitiationTime" title="审计开展时间" show-overflow></vxe-column>
        <vxe-column field="commencementOfAuditPeriod" title="审计期间(开始)" show-overflow></vxe-column>
        <vxe-column field="endOfAuditPeriod" title="审计期间(结束)" show-overflow></vxe-column>
      </vxe-table>
    </el-dialog>
  </div>
</template>
<script setup>
import * as echarts from "echarts";
import { markRaw, onMounted, ref } from "vue";
import { projectOverview } from "@/utils/mock/byTheBigScreen"; //mock数据
import { chartSetConfig } from "@/utils/chartSetConfig/chartSetConfig"; //图表公共配置
import { ZHEJIANGMAP } from "@/utils/zhejiang"; //地图文件
import ToolTipCard from "./components/toolTipCard.vue";
import ChartSet from "./components/chartSet.vue";
import dayjs from "dayjs";
import zigongsi from "@/assets/images/zigongsi.png";
import { useRouter } from "vue-router";
const router = useRouter();
/**
 * 跳转后台管理页面
 */
const back = () => {
  router.push("/auditTool/auditEvaluationSystem");
};
const { selfAdaption, tooltip, grid, axisLabel, splitLine } = chartSetConfig; //图表公共配置
const tableData = ref([]); //审计成果及整改效益系统
const dialogVisible = ref(false); //弹窗状态
/**
 * 任期已满超36个月（小于等于36的不展示）
 * @param row 行数据
 * @returns {string|any}
 */
const tenure = (row) => {
  const tenureValue = ref(); //任期
  if (row.endOfService === "至今") {
    // 结束日期是至今时
    tenureValue.value = dayjs().diff(dayjs(row.commencementOfOffice), "months");
  } else {
    tenureValue.value = dayjs(row.endOfService).diff(dayjs(row.commencementOfOffice), "months");
  }
  return tenureValue.value <= 36 ? "/" : tenureValue.value;
};
const auditTargetArray = ref(
  projectOverview.auditTargetArrayMock.filter((item) => {
    item.employmentPeriod = tenure(item);
    // 返回日期超过36个月的人员信息
    return item.employmentPeriod !== "/";
  }),
); // 可纳入任期审计对象
/**
 * 查看按钮
 * @param row 行数据
 */
const examine = (row) => {
  tableData.value = [row];
  dialogVisible.value = true;
};
const distributionOfTime = ref(); //时间分布图表
const distributionOfTimeEcharts = () => {
  //获取图表容器
  distributionOfTime.value = markRaw(echarts.init(document.getElementById("distributionOfTime")));
  //图表响应式变化
  selfAdaption(distributionOfTime.value);
  const option = {
    tooltip,
    legend: {
      // 图列
      show: true,
      bottom: "2%",
      data: ["离任审计", "任中审计"],
      textStyle: {
        fontSize: 14,
        color: "#fff",
      },
    },
    // 配置
    grid,
    xAxis: {
      type: "category",
      data: projectOverview.timeListMock.map((item) => item.year),
      axisLabel: {
        //刻度文本
        show: true,
        textStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        //刻度文本
        show: true,
        textStyle: {
          color: "#fff",
        },
      },
      splitLine: {
        //刻度线
        show: true,
        lineStyle: {
          color: "#799CB3",
          opacity: 0.24,
          type: "dashed",
        },
      },
    },
    series: [
      {
        name: "离任审计",
        barWidth: "32%", //柱形图宽度
        stack: "时间分布表",
        data: projectOverview.timeListMock.map((item) => item.outgoingAudit),
        type: "bar",
        itemStyle: {
          normal: {
            color: "#314FE0",
          },
        },
      },
      {
        name: "任中审计",
        barWidth: "32%", //柱形图宽度
        stack: "时间分布表",
        data: projectOverview.timeListMock.map((item) => item.numberOfAudits),
        type: "bar",
        itemStyle: {
          normal: {
            color: "#31B0E0",
          },
        },
      },
    ],
  };
  option && distributionOfTime.value.setOption(option); //挂载图表
};
const mapChart = ref(); //覆盖单位图表
const mapChartEcharts = () => {
  const nameMap = "浙江省";
  mapChart.value = markRaw(echarts.init(document.getElementById("mapChart"))); //注册地图容器
  echarts.registerMap("浙江省", ZHEJIANGMAP);
  //地图响应式变化
  window.addEventListener(
    "resize",
    () => {
      mapChart.value.resize();
    },
    false,
  );
  const optionMap = {
    tooltip: {
      trigger: "item",
      show: true,
      backgroundColor: "rgba(0,0,0,0)",
      borderColor: "rgba(0,0,0,0)",
      padding: [0, 0, 0, 0],
      formatter: function (params) {
        const dom = document.createElement("div");
        // 这里处理params的数据来实现组件和数据的联动
        const list = params.data;
        // ToolTipCard为vue组件，直接import , 第二个参数为props
        const MyComponent = createApp(ToolTipCard, { list });
        const instance = MyComponent.mount(dom);
        // instance.$el 是获取到的是html
        return instance.$el;
      },
    },
    visualMap: {
      min: 0,
      max: 9999,
      right: 26,
      bottom: 10,
      itemWidth: 16,
      itemHeight: 16,
      textStyle: {
        color: "#fff",
      },
      align: "left",
      inverse: true,
      pieces: [
        {
          value: 0,
          label: "0次",
          color: "#86cdff",
        },
        {
          min: 1,
          max: 2,
          label: "1-2次",
          color: "#379efa",
        },
        {
          min: 3,
          max: 9999,
          label: "3次以上",
          color: "#006fd1",
        },
      ],
    },
    geo: {
      map: nameMap,
      show: true,
      aspectScale: 1,
      roam: false,
      layoutCenter: ["50%", "50%"],
      layoutSize: "100%",
      tooltip: {
        trigger: "item",
        show: false,
      },
      z: 0,
      itemStyle: {
        shadowColor: "#005ceb",
        shadowOffsetX: 8,
        shadowOffsetY: 8,
      },
    },
    series: [
      {
        // 地图块的相关信息
        type: "map",
        map: nameMap,
        zoom: 1,
        roam: false,
        selectedMode: false,
        z: 1,
        aspectScale: 1,
        layoutCenter: ["50%", "50%"],
        layoutSize: "100%",
        itemStyle: {
          areaColor: "#031E88", //背景颜色
          borderColor: "#B8E2FF", //选择时边框颜色
          borderWidth: 1,
        },
        emphasis: {
          itemStyle: {
            areaColor: "#B8E2FF", //选择时背景颜色
            borderColor: "#fff", //选择时边框颜色
            borderWidth: 3,
          },
          label: {
            show: true,
            color: "#042751",
            textBorderType: "solid",
            textBorderWidth: 1,
            textBorderColor: "#CDE5FF",
          },
        },
        label: {
          show: true,
          fontSize: 19,
          fontWeight: "bold",
          color: "#042751",
          textBorderType: "solid",
          textBorderWidth: 1,
          textBorderColor: "#CDE5FF",
        },
        data: projectOverview.mapListMock,
      },
      {
        tooltip: {
          show: true,
        },
        type: "scatter",
        name: "杭州市",
        coordinateSystem: "geo",
        symbol: "image://" + zigongsi, //图标地址
        symbolSize: [50, 50], //图标大小
        symbolOffset: [18, -18], //偏移量
        data: (() => {
          return projectOverview.mapListMock.filter((item) => {
            if (item.name === "子公司") {
              // 当为分公司时，需要把图标坐标放在value里面
              return (item.value = [119.476498, 29.898918]);
            }
          });
        })(),
      },
    ],
  };
  mapChart.value.setOption(optionMap);
};
/**
 * 人名显示姓
 * @param name
 * @returns {String}
 */
const filtrationName = (name) => {
  // 根据姓名隐藏名，只显示姓
  return `${name.slice(0, 1)}**`;
};
onMounted(async () => {
  distributionOfTimeEcharts();
  mapChartEcharts();
});
</script>

<style scoped lang="less">
@import "@/assets/styles/byTheBigScreen/index.less";
</style>
